<script setup>
import {getDynamicsByUserId,deleteDynamic,editDynamic} from "@/api/dynamic"
import {useUserStore} from "@/stores/user"
import { Delete,Edit } from '@element-plus/icons-vue'
import {ref}  from "vue";
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const props=defineProps({
  userId: {
    required: true
  }
})

const myDynamics=ref([])

const userStore = useUserStore()

const dynamiclength=ref(0)
//根据父组件的userId获取动态列表
const getMyDetails= async(userId)=>{
    const res= await getDynamicsByUserId(userId)
    console.log(res)
    myDynamics.value=res.data.list
    dynamiclength.value=myDynamics.value.length
}
getMyDetails(props.userId)



defineExpose({
  dynamiclength
})

const formModel=ref({})
const dialogVisible=ref(false)
const rules={
    title:[
        {required: true,message: '请输入标题'}
    ],
    content:[
        {required: true,message: '请输入内容'}
    ]
}


//打开编辑弹窗
const opDetailEdit=(dynamic)=>{
  dialogVisible.value=true
  formModel.value={...dynamic}
  console.log(formModel.value)
}

//动态编辑
const editChannel=async ()=>{
  const res=await editDynamic(formModel.value.dynamicId,formModel.value.title,formModel.value.content)
  console.log(res)
  ElMessage.success("修改成功");
  //关闭 dialog
  dialogVisible.value=false
  //修改完成重新拉取最新的个人动态
  getMyDetails(props.userId)

}

//删除动态
const del=(dynamicId)=>{
  console.log(dynamicId)
    ElMessageBox.confirm(
    '确认删除?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    console.log(typeof dynamicId)
      const res=await  deleteDynamic(dynamicId)
      console.log("afsafsa")
      console.log(res)  
      getMyDetails(props.userId)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
    })
}


</script>

<template>
  <div class="dynamic" v-for="dynamic in myDynamics" :key="dynamic.id" >
    <DynamicShow :dynamic="dynamic">
        <template #eidt_delete v-if="props.userId==userStore.userId">
            <el-button type="primary" :icon="Edit" @click="opDetailEdit(dynamic)" circle />
            <el-button @click="del(dynamic.dynamicId)" type="danger" :icon="Delete" circle />
        </template>
    </DynamicShow>
    
  </div>


  <el-dialog
    v-model="dialogVisible"
    title="动态编辑"
    width="500"
    
  >
    
  <el-form ref="form" :model="formModel" :rules="rules" label-width="auto" style="max-width: 600px">
    <el-form-item label="标题" prop="title">
      <el-input v-model="formModel.title" />
    </el-form-item>
    
    <el-form-item  label="内容" prop="content">
      <!-- <el-input :rows="15" v-model="formModel.content" type="textarea"  /> -->
      <div class="editor">
      <quill-editor
            ref="editorRef"
            theme="snow"
            v-model:content="formModel.content"
            contentType="html"
          >
          </quill-editor>
        </div>
    </el-form-item>
  </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editChannel">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* .dynamic{
    margin-left: 200px;
    width: 992.8px;
} */
</style>